<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<title>发布页面</title>
		<link rel="stylesheet" href="static/miniApp/css/box_style.css" />
		<link rel="stylesheet" href="static/miniApp/css/cmxform.css" />
		<script type="text/javascript" src="static/miniApp/js/jquery-1.7.1.min.js" ></script>
		<script type="text/javascript" src="static/miniApp/js/jquery.validate.js" ></script>
	</head>
	<body style="background: #f7f7f7;margin: 0;padding:0">
		<!-- <header style="width: 100%;height: 64px;background: #fff;"></header> -->
		<form action="miniapp/publishprod" class="cmxform" onsubmit="return checkInfo();" id="form_id" method="post" enctype="multipart/form-data">
			<div class="publish_box">
				<div class="publish_head">发布小程序</div>
				<ul class="content_list">
					<li>
						<label>小程序名称</label>
						<input type="text" name="PROD_NAME" id="PROD_NAME" class="input_text"
								data-rule-required="true" 
								data-msg-required="小程序名称不能为空." placeholder="请输入小程序名称"/>
					</li>
					<li>
						<label>小程序二维码<e>建议尺寸：不少于400*400px，并且为正方形</e></label>
						<div class="input_pic">
							<input type="file" id="hdnImg0" name="qrfile" onchange="setImagePreview(0)"/>
							<img src="" width="100%" height="100%" id="imgPreview0" >
						</div>
					</li>
					<li>
						<label>小程序URL<e>选填</e></label>
						<input type="text" name="APP_URL" class="input_text" placeholder="请输入小程序有效网址 " />
					</li>
					<li>
						<label>小程序描述</label>
						<textarea class="input_textarea" name="PROD_DESC" placeholder="请输入小程序描述"
							data-rule-required="true" data-msg-required="小程序描述不能为空."></textarea>
					</li>
					<li id="icon">
						<label>添加标签<e>（最多可选择五个）</e></label>
						<c:forEach items="${lableList}" var="var" varStatus="vs">
							<span class="lable_span" id="${var.id }">${var.lable_name }</span>
						</c:forEach>
						<input type="hidden" value="${updPd.LABELS }" name="LABELS" id="LABELS" />
					</li>
					<li id="nav">
						<label>
							选择类别<e>（只能选择唯一类别）</e>
						</label>
						<c:forEach items="${applist}" var="var" varStatus="vs">
							 <span id="${var.ID }">${var.NAME }</span>
						</c:forEach>
						<label>
							<input type="hidden" value="${updPd.COLUMN_ID }" name="COLUMN_ID" id="COLUMN_ID"/>
						</label>
					</li>
					<li>
						<label>小程序ICON<e>建议尺寸：不小于400*400px，并且为正方形</e></label>
						<div class="input_pic">
							<input type="file" id="hdnImg1" name="iconfile" onchange="setImagePreview(1)"/>
							<img src="" width="100%" height="100%" id="imgPreview1" >
						</div>
					</li>
					<li id="screen_pic">
						<label>产品截图<e>建议尺寸：建议尺寸：720*1280px</e></label>
						<div class="input_pic screen_cut" id="pic2">
							<input type="file" id="hdnImg2" name="img0" onchange="setImagePreview(2)"/>
							<img src="" id="imgPreview2" class="prod_img" width="100%" height="100%">
						</div>
						
					</li>
					<li>
						<label>小程序作者</label>
						<input type="text" name="AUTHOR" class="input_text" placeholder="请输入小程序作者"
							data-rule-required="true" data-msg-required="小程序作者不能为空."/>
					</li>
				</ul>
				<div class="publish_button">
					<button id="sumbit_but">保存提交</button>
				</div>
			</div>
		</form>
	</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("#form_id").validate();
	});
	function checkInfo(){
		var qrImg = $("#imgPreview0").attr("src");
		if(qrImg == null || qrImg == '' || qrImg == undefined){
			alert("二维码图片不能为空.");
			return false;
		}
		var iconImg = $("#imgPreview1").attr("src");
		if(iconImg == null || iconImg == '' || iconImg == undefined){
			alert("小程序ICON图片不能为空.");
			return false;
		}
		var prodImg = "";
		$("#screen_pic img").each(function (){
			prodImg += $(this).attr("src");
		});
		prodImg = prodImg.replace(/(^\s*)|(\s*$)/g, "");;
		if(prodImg == null || prodImg == '' || prodImg == undefined){
			if(prodImg == null || prodImg == '' || prodImg == undefined){
				alert("至少一张产品截图.");
				return false;
			}
		}
		var labels = "";
		$("#icon .span_click").each(function(){
			labels += "," + $(this).attr("id");
		});
		if(labels == null || labels == '' || labels == undefined){
			alert("请选择标签.");
			return false;
		}
		$("#LABELS").val(labels);
		var COLUMN_ID = $("#COLUMN_ID").val();
		if(COLUMN_ID == null || COLUMN_ID == '' || COLUMN_ID == undefined){
			alert("请选择类别.");
			return false;
		}
		var nameNum = "";
		var prodName = $("#PROD_NAME").val();
		var prodId = $("#ID").val();
		//检验名称是否存在
		$.ajax({
			type: "POST",
			async: false,
			url: '<%=basePath%>miniapp/findnumbyname.do?name=' + prodName + "&id=" + prodId,
			dataType:'json',
			success: function(data){
				 nameNum = data.num;
				 if(nameNum == "-1"){
					 alert("请输出小程序名称.");
					 return false;
				 }else if(nameNum == "-2"){
					 alert("系统繁忙！");
					 return false;
				 }
			}
		});
		if(nameNum == "" || parseInt(nameNum) != 0){
			alert("小程序名称已存在.");
			return false;
		}
		return true;
	}
	</script>
</html>
